<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author YDZ
-->
<template>
  <div>
    <PageWrapper>
      <template #headerContent>
        <div style="display: flex; flex-direction: column;align-items: flex-end;padding-top: 8px;">
          <div style="display: flex;align-items: center;margin-right: 20px;"><div style="width: 30px; height: 10px; background: #1677ff; border-radius: 2px;margin-right: 5px;"></div>半空货位</div>
          <div style="display: flex;align-items: center;margin-right: 20px;"><div style="width: 30px; height: 10px; background: #00b42a; border-radius: 2px;margin-right: 5px;"></div>全空货位</div>
          <div style="display: flex;align-items: center;margin-right: 20px;"><div style="width: 30px; height: 10px; background: #ff4d4f; border-radius: 2px;margin-right: 5px;"></div>全满货位</div>
        </div>
      </template> 
      <Tabs v-model:activeKey="activeKey" type="card" @change="tabChange">
        <!-- v-bind="omit(item, ['Form', 'key'])" -->
        <TabPane
          v-for="item in tabsFormSchema"
          :key="item.partCode"
          :forceRender="true"
          :tab="item.part"
          v-bind="omit(item, ['Form', 'key'])"
        >
          <!-- <BasicForm @register="item.Form[0]" /> -->
          <div :class="`${prefixCls}__content`">
            <List>
              <Row :gutter="{ xs: 8, sm: 16, md: 28, lg: 32 }">
                <template v-for="item in cardList" :key="item.treeNames">
                  <Col :span="3" style="padding-right: 0; padding-left: 0">
                    <List.Item style="padding: 6px">
                      <Card
                        :hoverable="true"
                        :class="`${prefixCls}__card`"
                        :style="getCardStyle(item)"
                        @click="toggleMask(item, true)"
                        @mouseleave="toggleMask(item, false)"
                      >
                        <div :class="`${prefixCls}__card-title`">
                          {{ item.treeNames }}
                        </div>
                        <div :class="`${prefixCls}__card-title`"> 容积：{{ item.volume + '%' }} </div>
                        <div :class="`${prefixCls}__card-title`"> 数量：{{ item.bookSum }} </div>
                        <div class="mask" v-if="showMaskMap[item.treeNames] && bookList.length>0">
                          <div v-for="itemBook in bookList" :key="itemBook.id">
                            <div> {{ itemBook.invName }} 数量：{{ itemBook.iqty }} 剩余数量：{{ itemBook.iqty }} </div>
                          </div>
                        </div>
                      </Card>
                    </List.Item>
                  </Col>
                </template>
              </Row>
            </List>
          </div>
        </TabPane>
      </Tabs>
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup name="ViewsWmsWhOtherRdrecords0102TabPos">
  import { unref, watch, onMounted, computed, defineProps, ref, reactive } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import { companyTreeData } from '/@/api/sys/company';
  import { useUserStore } from '/@/store/modules/user';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  import { whPosCardFindActual } from '/@/api/wms/wh/pos/whPosCard';
  import { BasicForm, UseFormReturnType } from '/@/components/Form';
  import { PageWrapper } from '/@/components/Page';
  import { omit } from 'lodash-es';
  import { Tabs, Card, Row, Col, List } from 'ant-design-vue';
  import { Popover } from '/@/components/Popover';
  // import { cardList } from './data';
  import { findPartitionInfo, findLocationInfo, findBookInfo } from '/@/api/bas/pos/basPosition';

  const { t } = useI18n('wh.rd01.rd01');
  const prefixCls = 'list-card';
  const { showMessage } = useMessage();
  const { meta } = unref(router.currentRoute);
  const props = defineProps({
    code: { type: String, default: '' },
  });
  const userStore = useUserStore();
  const activeKey = ref('10');
  const TabPane = Tabs.TabPane;
  // const tabsFormSchema: TabsFormType[] = [];
  const tabsFormSchema = ref([]);
  const cardList = ref([]);
  const bookList = ref([]);

  // const showMaskMap = ref(new Map());
  const showMaskMap = reactive({});
  const getTitle = {
    icon: meta.icon || 'i-ant-design:book-outlined',
    value: meta.title || t('货位实仓查询'),
  };

  // 静态数据开始
  const toggleMask = async (item, show) => {
    if (show) {
      const res = await findBookInfo({ posName: item.treeNames });
      // console.log(res);
      bookList.value = res;
      // cardList.value = res;
    }

    console.log(item, show);
    // showMaskMap.value.set(item.id, show);
    showMaskMap[item.treeNames] = show;
  };
  // for (let i = 1; i <= 5; ++i) {
  //   const tabsKey = `tabs${i}`;

  //   // 每个标签页8个字段
  //   tabsFormSchema.push({
  //     key: tabsKey,
  //     tab: tabsKey,
  //     forceRender: true,
  //   });
  // }

  // 静态数据结束

  async function handleFindPartitionInfo() {
    // const res = await findPartitionInfo();
    // console.log(res);
    tabsFormSchema.value = await findPartitionInfo();
    // res.forEach((item) => {
    //   console.log(item);
    //   tabsFormSchema.value.push({
    //     tab: item.part,
    //     forceRender: true,
    //     key: item.partCode,
    //   })
    // });
    console.log(tabsFormSchema.value);
  }

  async function tabChange(key) {
    console.log('key', key);
    activeKey.value = key;
    const res = await findLocationInfo({ secondValue: key });
    cardList.value = res;
    console.log(res);
  }

  function getCardStyle(item) {
    // 如果数量大于1，设置背景为 blue，如果数量为0，设置背景为 green，如果syUseQty为0，设置背景为 red
    if (item.bookSum >= 1) {
      return {
        backgroundColor: '#1677ff',
      };
    } else if (item.bookSum == 0) {
      return {
        backgroundColor: '#00b42a',
      };
    } else if (item.volume == 100) {
      return {
        backgroundColor: '#ff4d4f',
      };
    }
    // return {
    //   backgroundColor: item.treeNames == 'A1-L010022' ? '#f0f2f5' : '#fff',
    // };
  }

  onMounted(() => {
    handleFindPartitionInfo();
    tabChange(activeKey.value);
  })
</script>
<style lang="less" scoped>
  .list-card {
    &__card {
      width: 100%;
      margin-bottom: -8px;
      position: relative; // 为卡片添加相对定位

      :deep(.ant-card-body) {
        padding: 12px !important;
      }

      &-title {
        margin-bottom: 5px;
        color: @text-color-base;
        font-size: 16px;
        font-weight: 500;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        color: @text-color-secondary;
        font-size: 14px;
      }
      .mask {
        position: absolute;
        top: 70%;
        left: 74%;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px;
        border-radius: 4px;
        z-index: 1000;
        min-width: 100px;
        white-space: nowrap; // 防止文字换行
      }
    }
  }
</style>
